<template>
	<div>
		<el-popover placement="top-start" :title="Title" :width="400" :disabled="userInfo.authArea?true:false" trigger="click">
			<ul class="nav-tag-list">
				<li
					v-for="item in options"
					:key="item.id"
					class="nav-tag-item"
					:class="{ active: activeIndexs.includes(item.id) }"
					@click="handleClick(item)"
				>
					<div class="flex align-center">
						<div class="text-tag">{{ item.administrationName }}</div>
					</div>
				</li>
			</ul>
			<template #reference>
				<ul class="input-box align-center">
					<li v-for="item in activeList" :key="item.id" class="nav-tag-item active fc">
						<div class="flex align-center">
							<div class="text-tag">{{ item.label }}</div>
						</div>
					</li>
				</ul>
			</template>
		</el-popover>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'
import {getStore} from '@/utils/store'

const userInfo = getStore('userInfo')||{}

const props = defineProps<{
	modelValue: any
  areaSchemeList?:any
}>()


const emit = defineEmits(['update:modelValue'])
const options = ref([])

const activeList = computed({
	get() {
		return props.modelValue
	},
	set(val) {
	},
})
const activeIndexs = computed(() => {
	return activeList.value.map((item) => item.value)
})
const Title = computed(() => {
	return `已选择(${activeList.value.length})个` || '已选择(0)个'
})

const getInitData = () => {
	apiMod
		.sysadministration_getTree({
			regionGrade: 3,
			administrationPid: 199554,
		})
		.then((res) => {
      const Len = props.modelValue.length
			options.value = res.data.filter(item=>item.administrationName !=='市辖区').map(item=> {
        if(item.id ==userInfo.authArea && Len ==0) {
          handleClick(item)
        }
        return item
      })
		})
}

const handleClick = (item) => {
	const indexKey = activeList.value.findIndex(({ value }) => value === item.id)
	if (indexKey !== -1) {
		activeList.value.splice(indexKey, 1)
	} else if(!props.areaSchemeList.includes(item.id)) {
		activeList.value.push({
			label: item.administrationName,
			value: item.id,
		})
	}else {
    
  }
	// emit('update:modelValue', activeList.value)
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.input-box {
	width: 100%;
	min-height: 40px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid #dcdcdc;
	padding:4px 10px;
  display: flex;
	flex-flow: row wrap;
	gap: 6px;
  .nav-tag-item {
    height: 27px;
		border-radius: 6px;
		background: #fff5f7;
		padding: 4px 16px;
	}
	.active {
		background: #ae8e94 !important;
		color: #fff !important;
	}
}

.nav-tag-list {
	display: flex;
	flex-flow: row wrap;
	gap: 6px;
	.nav-tag-item {
		height: 27px;
		border-radius: 6px;
		background: #fff5f7;
		padding: 4px 16px;
		&:hover {
			cursor: pointer;
		}
	}
	.active {
		background: #ae8e94 !important;
		color: #fff !important;
	}
}
</style>
